<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="example">
    <h2>1.监视监听</h2>
    <button @click="test1">test1</button>
    <button @click="test2('abc')">test2</button>
    <button @click="test3">test3</button>
    <button @click="test4(123,$event)">test4</button>

    <h2>2.事件修饰符</h2>
    <div style="width: 200px;height: 200px;background: #ffb118" @click="test5">
        <div style="width: 100px;height: 100px;background: rgba(246,146,129,0.84)" @click.stop="test6"></div>
    </div>

    <a href="https://baidu.com" @click.prevent="test7">百度</a>
    <h2>3.按键修饰符</h2>
    <input type="text" @keyup.13="test8">
    <input type="text" @keyup.enter="test8">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#example',
        data:{
            test1(){
                alert('test1')
            },
            test2(msg){
                alert(msg)
            },
            test3(event){
                alert(event.target.innerHTML)
            },
            test4(number,event){
                alert(number+'- - -'+event.target.innerHTML)
            },
            test5(){
                alert('out')
            },
            test6(){
                //event.stopPropagation()
                alert('inner')
            },
            test7(){
                //event.preventDefault()
                alert('点击了')
            },
            test8(event){
                alert(event.target.value+''+event.keyCode)
                // if(event.keyCode===13){
                //     alert(event.target.value+''+event.keyCode)
            }
        }
    })

</script>
</body>
</html>